<template>
  <div class="w-fill h-auto bg-[#1a2c38] min-375 text-white font-semibold">
    <!-- banner -->
    <div
      class="banner p-4 flex flex-col md:flex-row items-center justify-between p4"
    >
      <div
        class="relative bg-[#0f212e] p-4 rounded-lg shadow-lg text-white w-64 flex flex-col justify-center items-center mb-4 mb-0 ml-8"
      >
        <div class="flex justify-between items-center mb-6 w-full">
          <span class="text-xl font-bold">kichiku5</span>
          <i class="far fa-star"></i>
        </div>
        <div class="flex justify-between w-full">
          <div class="text-sm mb-2 w-full">您的 VIP 进度</div>
          <div class="flex items-center mb-2">
            <span class="text-sm">0.00%</span>
            <i class="fas fa-info-circle ml-1"></i>
          </div>
        </div>

        <div class="w-full bg-[#2f4553] h-1 rounded-full mb-1">
          <div class="bg-gray-400 h-1 rounded-full" style="width: 0%"></div>
        </div>
        <div class="flex justify-between items-center text-sm w-full">
          <div class="flex justify-between items-center">
            <i class="far fa-star"></i>
            <span class="text-gray-400 text-base">暂无级别</span>
          </div>
          <div class="flex justify-between items-center">
            <img :src="icon1" style="width: 14px;height: 14px;" class="mr-1" alt="">
            <span class="text-yellow-500 text-base">铜</span>
          </div>
        </div>
      </div>
      <div class="md:flex h-64 items-center justify-center md:mr-8">
        <div class="flex items-center">
         <img :src="banner1" alt="">
        </div>
      </div>
    </div>
    <!-- 俱乐部福利 -->
    <div class="w-full p-4">
      <h1 class="text-white text-2xl font-bold mb-6 text-center">
        Stake VIP 俱乐部福利
      </h1>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="bg-[#213743] p-4 rounded-lg flex items-center" v-for="(item,i) in vipFl" :key="i">
          <img
            alt="Icon representing assistance"
            class="w-12 h-12 mr-4"
            height="50"
            :src="item.img"
            width="50"
          />
          <div>
            <h2 class="text-white font-semibold">{{ item.name }}</h2>
            <p class="text-[#b1bad3] text-sm font-thin">
              {{ item.desc }}
            </p>
          </div>
        </div>
        
      </div>
    </div>
    <!-- 问题 -->
    <div class="w-full p-4">
      <div class="text-center mb-6">
        <h1 class="text-2xl font-bold">常见问题</h1>
        <p class="text-sm">联系我们屡获殊荣的支持团队</p>
      </div>
      <div class="responsive-layout">
        <div class="sidebar font-semibold mb-6 p-1 md:mb-0 text-sm">
          <button
            @click="activeTab = 'general'"
            :class="{
              'active-tab': activeTab === 'general',
              '': activeTab !== 'general'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white rounded-none"
          >
            常规
          </button>
          <button
            @click="activeTab = 'benefits'"
            :class="{
              'active-tab': activeTab === 'benefits',
              '': activeTab !== 'benefits'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            福利
          </button>
          <button
            @click="activeTab = 'vip'"
            :class="{
              'active-tab': activeTab === 'vip',
              '': activeTab !== 'vip'
            }"
            class="pl-[20px] btn bg-[#071824] w-full px-1 py-2 text-white"
          >
            VIP 服务代表
          </button>
        </div>
        <div class="content bg-[#0f212e] p-4 rounded-md">
          <div v-if="activeTab === 'general'">
            <div v-for="(item, index) in generalFaqs" :key="index" class="mb-4" style="
                  box-shadow:0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 2px 0 rgba(0, 0, 0, .12) , inset 0 1px rgba(255, 255, 255, .04);
                ">
              <div
                @click="toggleFaq(index, 'general')"
                class="mb-2 cursor-pointer"
              >
                <div
                  class="flex text-sm justify-between items-center p-4 bg-[#213743] rounded-md mb-0 cursor-pointer"
                  :style="
                    item.open ? 'border-radius: 0.375rem 0.375rem 0 0 ;' : ''
                  "
                >
                  <span>{{ item.question }}</span>
                  <i class="ml-2"
                  ><van-icon :name="item.open ? 'arrow-down' : 'arrow'" /></i>
                </div>
                <div
                  v-if="item.open"
                  class="p-4 bg-[#213743]"
                  style="
                    border-top: 2px solid #2f4553;
                    border-radius: 0 0 0.375rem 0.375rem;
                  "
                >
                  <p class="text-[#b1bad3] text-sm" >{{ item.answer }}</p>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 'benefits'">
            <div
              v-for="(item, index) in benefitsFaqs"
              :key="index"
              class="mb-4"
            >
              <div
                @click="toggleFaq(index, 'benefits')"
                class="mb-2 cursor-pointer"
              >
                <div
                  class=" text-sm flex justify-between items-center p-4 bg-[#213743] rounded-md mb-0 cursor-pointer"
                  :style="
                    item.open ? 'border-radius: 0.375rem 0.375rem 0 0 ;' : ''
                  "
                >
                  <span>{{ item.question }}</span>
                  <i
                    class="ml-2"
                  ><van-icon :name="item.open ? 'arrow-down' : 'arrow'" /></i>
                </div>
                <div
                  v-if="item.open"
                  class="p-4 bg-[#213743] text-sm"
                  style="
                    border-top: 2px solid #2f4553;
                    border-radius: 0 0 0.375rem 0.375rem;
                  "
                >
                  <p class="text-[#b1bad3] text-sm">{{ item.answer }}</p>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeTab === 'vip'">
            <div v-for="(item, index) in vipFaqs" :key="index" class="mb-4" style="
                  box-shadow:0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 2px 0 rgba(0, 0, 0, .12) , inset 0 1px rgba(255, 255, 255, .04);
                ">
              <div @click="toggleFaq(index, 'vip')" class="mb-2 cursor-pointer" >
                <div
                  class="text-sm font-semibold flex justify-between items-center p-4 bg-[#213743] rounded-md mb-0 cursor-pointer"
                  :style="
                    item.open ? 'border-radius: 0.375rem 0.375rem 0 0 ;' : ''
                  "
                >
                  <span>{{ item.question }}</span>
                  <i class="ml-2"
                  >
                  <van-icon :name="item.open ? 'arrow-down' : 'arrow'" />
                </i>
                </div>
                <div
                  v-if="item.open"
                  class="p-4 bg-[#213743]"
                  style="
                    border-top: 2px solid #2f4553;
                    border-radius: 0 0 0.375rem 0.375rem;
                  "
                >
                  <p class="text-[#b1bad3] text-sm" >{{ item.answer }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import icon1 from "../../assets/VIP/vip_1.png";
import banner1 from "../../assets/VIP/d1.png";

const activeTab = ref("vip");
const generalFaqs = ref([
  { question: "常规问题1", answer: "常规问题1的答案", open: false },
  { question: "常规问题2", answer: "常规问题2的答案", open: false },
  { question: "常规问题3", answer: "常规问题3的答案", open: false }
]);
const benefitsFaqs = ref([
  { question: "福利问题1", answer: "福利问题1的答案", open: false },
  { question: "福利问题2", answer: "福利问题2的答案", open: false },
  { question: "福利问题3", answer: "福利问题3的答案", open: false }
]);
const vipFl = ref([
    {
        name:"助推奖金",
        desc:"您可以获得助推奖金用来抵消您的损失和获得更多奖励。",
        img:"https://oaidalleapiprodscus.blob.core.windows.net/private/org-6INSLGfHJVwQ3sMa5wqcu8BM/user-82So9P28FJY5ojERkWmv3vfu/img-sKZLFns7LhrqZmmFRnaO6JCO.png?st=2024-06-03T08%3A20%3A36Z&amp;se=2024-06-03T10%3A20%3A36Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-06-03T00%3A01%3A10Z&amp;ske=2024-06-04T00%3A01%3A10Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=R5k4nO607JnaErXyKDbOUXAjqB/tPhzQIvswlCvdbwA%3D"
    },
    {
        name:"助推奖金",
        desc:"您可以获得助推奖金用来抵消您的损失和获得更多奖励。",
        img:"https://oaidalleapiprodscus.blob.core.windows.net/private/org-6INSLGfHJVwQ3sMa5wqcu8BM/user-82So9P28FJY5ojERkWmv3vfu/img-sKZLFns7LhrqZmmFRnaO6JCO.png?st=2024-06-03T08%3A20%3A36Z&amp;se=2024-06-03T10%3A20%3A36Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-06-03T00%3A01%3A10Z&amp;ske=2024-06-04T00%3A01%3A10Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=R5k4nO607JnaErXyKDbOUXAjqB/tPhzQIvswlCvdbwA%3D"
    },
    {
        name:"助推奖金",
        desc:"您可以获得助推奖金用来抵消您的损失和获得更多奖励。",
        img:"https://oaidalleapiprodscus.blob.core.windows.net/private/org-6INSLGfHJVwQ3sMa5wqcu8BM/user-82So9P28FJY5ojERkWmv3vfu/img-sKZLFns7LhrqZmmFRnaO6JCO.png?st=2024-06-03T08%3A20%3A36Z&amp;se=2024-06-03T10%3A20%3A36Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-06-03T00%3A01%3A10Z&amp;ske=2024-06-04T00%3A01%3A10Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=R5k4nO607JnaErXyKDbOUXAjqB/tPhzQIvswlCvdbwA%3D"
    },
    {
        name:"助推奖金",
        desc:"您可以获得助推奖金用来抵消您的损失和获得更多奖励。",
        img:"https://oaidalleapiprodscus.blob.core.windows.net/private/org-6INSLGfHJVwQ3sMa5wqcu8BM/user-82So9P28FJY5ojERkWmv3vfu/img-sKZLFns7LhrqZmmFRnaO6JCO.png?st=2024-06-03T08%3A20%3A36Z&amp;se=2024-06-03T10%3A20%3A36Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-06-03T00%3A01%3A10Z&amp;ske=2024-06-04T00%3A01%3A10Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=R5k4nO607JnaErXyKDbOUXAjqB/tPhzQIvswlCvdbwA%3D"
    },
    {
        name:"助推奖金",
        desc:"您可以获得助推奖金用来抵消您的损失和获得更多奖励。",
        img:"https://oaidalleapiprodscus.blob.core.windows.net/private/org-6INSLGfHJVwQ3sMa5wqcu8BM/user-82So9P28FJY5ojERkWmv3vfu/img-sKZLFns7LhrqZmmFRnaO6JCO.png?st=2024-06-03T08%3A20%3A36Z&amp;se=2024-06-03T10%3A20%3A36Z&amp;sp=r&amp;sv=2023-11-03&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-06-03T00%3A01%3A10Z&amp;ske=2024-06-04T00%3A01%3A10Z&amp;sks=b&amp;skv=2023-11-03&amp;sig=R5k4nO607JnaErXyKDbOUXAjqB/tPhzQIvswlCvdbwA%3D"
    },
])
const vipFaqs = ref([
  {
    question: "我的 VIP 服务代表能为我做什么？",
    answer: "VIP 服务代表能为您提供个性化的服务和支持。",
    open: false
  },
  {
    question:
      "在被分配了一名 VIP 服务代表后，所获得的优惠会是一个特殊的还是可更新的福利？",
    answer: "您将获得一个特殊的优惠，并且可以根据需要进行更新。",
    open: false
  },
  {
    question: "VIP 服务代表的电话包括什么，与常规的在线支持人员又有何不同？",
    answer: "VIP 服务代表的电话包括个性化的服务和更高的优先级。",
    open: false
  },
  {
    question: "我什么时候可以分配为 VIP 服务代表？",
    answer: "您可以在特定的时间段内申请分配 VIP 服务代表。",
    open: false
  },
  {
    question: "万一我的 VIP 服务代表休假去了该怎么办？",
    answer:
      "请确保向您的 VIP 服务代表表明您有 VIP 服务方面的查询请求。如果您漏掉了这一步，您可以联系在线支持获取一个 VIP 备份链接。这将是您的服务代表回来之前的临时备份代表。",
    open: false
  }
]);

const toggleFaq = (index, tab) => {
  if (tab === "general") {
    generalFaqs.value[index].open = !generalFaqs.value[index].open;
  } else if (tab === "benefits") {
    benefitsFaqs.value[index].open = !benefitsFaqs.value[index].open;
  } else if (tab === "vip") {
    vipFaqs.value[index].open = !vipFaqs.value[index].open;
  }
};
</script>
<style scoped lang="less">
.banner {
  background-color: #213743;
}
@media (min-width: 600px) {
  .responsive-layout {
    display: flex;
    position: relative;
  }
  .responsive-layout .sidebar {
    width: 220px;
    height: 300px;

    display: block;
    margin-right: 20px;
    background-color: unset;
    border-radius: 0;
    position: sticky;
    top: 2rem;
    padding: 0;
    .btn {
      width: 220px;

      border-radius: 0;
      text-align: left;
    }
  }
  .responsive-layout .content {
    flex-grow: 1;
  }
  .active-tab {
    border-left: 1px solid #1475e1 !important;
  }
}
.content {
  overflow: auto;
  table {
    min-width: 900px;
  }
}
.sidebar {
  background-color: #071824;
  display: flex;
  border-radius: 40px;
  .btn {
    height: 40px;
    border-radius: 40px;
    text-align: center;
    border-left: 1px solid #071824;
  }
}
.active-tab {
  background-color: #2f4553 !important;
}
</style>
